昨天介紹了選擇器，讓我們可以選取到需要操作的元素，那今日來加緊腳步介紹選取之後可以做什麼事情吧。

在開始之前先來推薦線上編輯器，這可以讓你不用在本機上開檔案來練習，只需要在網頁中 coding 就好，而且能夠即時看到當前畫面。

個人比較常使用的有這三個，

1. JSBin，快速、不用帳號就能使用。
2. Codepen，上面很多作品，可以使用關鍵字查詢。
3. JSfiddle，相較上方兩者較少使用。

使用線上編輯器的好處大致有兩個，

1. 快速、方便、即時看到畫面
2. 分享自己的程式碼給別人

最重要的是第二個，也就是分享自己的程式碼給別人。

舉個例子，如果在 coding 過程中遇到困難，想要尋求別人協助，但是你該怎麼把當前狀態與程式碼給別人呢?
總不可能把檔案打包成壓縮檔，或是直接複製一大串程式碼。所以若是該專案規模不大，用這些線上編輯器綽綽有餘，還能夠把你的作品分享給大家看。

但專案較複雜或是需要協作，別鬧了，請直接使用版控(git)，然後再放上 Github 之類的原始碼代管服務。

HTML

innerHTML

<div id="demo">
  <a href="#">myLink</a>
</div>

1. 將指定的 HTML 元素放入所選取的元素中。

var demo = document.getElementById("demo");
console.log(demo.innerHTML); // <a href="#">myLink</a>

demo.innerHTML = "Hello";
console.log(demo.innerHTML); // Hello

2. 也可以用字串拼接的方式放入變數。

var demo = document.getElementById("demo");
var num = 123;
demo.innerHTML = "<h1>" + num + "</h1>"; // 123

3. ES6 字串模板。我們可以發現上方的拼接中，只是要加入一個變數就很不方便，若是更複雜更多的變數將會是場 "、' 大戰，所幸可以使用 「`」 來達成更方便的字串拼接。

使用方法: ${變數}，並且記得頭尾都要用 ` 包住。

var demo = document.getElementById("demo");
var num = 123;
demo.innerHTML = `<h1>${num}</h1>`; // 123

XSS

innerHTML 使用上需注意資料來源是否安全，若是前後端沒有過濾掉一些非法字元，可能導致惡意內容直接傳入資料庫，接著渲染到用戶使用的畫面，造成安全問題。

跨網站指令碼（英語：Cross-site scripting，通常簡稱為：XSS） 來源: 維基百科

然後別懷疑，XSS 在資安漏洞事件中出現次數算是前幾名的，常見的危害像是偷取 cookie。
所以要注意網頁安全，不要以為不知道有什麼攻擊手法就不會發生在自己身上，哪天被 getshell 都不知道QQ

Ps. 想了解更多 XSS 的成因與預防，可以自己去 google。
雖然大部分過濾與安全機制都是做在後端，但在學習前端時就該有一個重要的概念「永遠不要相信使用者」XD

EX: 這是一個簡易的留言板，會把用戶輸入的內容顯示出來，

<textarea id="content" cols="10" rows="10"></textarea>
<input id="submitBtn" type="button" value="送出">
<div id="showContent"></div>

稍微解釋這邊的程式碼，主要是有一個輸入框、還有一個送出的按鈕，當送出的按鈕點選時，輸入框的內容會被放到 id 為 showContent 的 div 中。

document.getElementById("submitBtn").onclick = function(){
  var content = document.getElementById("content").value;
  document.getElementById("showContent").innerHTML = content;
};

看起來好像沒有什麼問題~

But

若是用戶輸入，

Hello~~~
<script>alert('Hi')</script>

Hello 會正常顯示，script 這段不會顯示出來，因為被當成 HTML 標籤來解析，但是已經被植入到頁面，這筆留言被傳入資料庫後，日後其他用戶到這個頁面時就會執行這段 script。

createElement

上方提到了 innerHTML 若是在沒有過濾的情況下可能產生 XSS，所以也可以考慮使用這種方式來添加元素。

<h1 id="demo"></h1>

var myLink = document.createElement('a');
myLink.textContent = "click me";
myLink.setAttribute('href', 'http://www.google.com');
document.getElementById('demo').appendChild(myLink);

removeElement

透過 createElement 建立的元素，可以使用 removeElement 來移除。

document.getElementById('demo').removeChild(myLink);

CSS

遇到屬性有 - 號的，移除後把後面的字母變大寫。

也就是把用 - 連結的屬性名稱改用駝峰的方式來操作。

document.body.style.width = "100px";

// padding-top
document.body.style.paddingTop = "20px";

取得屬性值時會包含單位，ex: px、em...等等，若是要運算時需要轉為數字，

document.body.style.width = (parseInt(document.body.style.width) + 50) + "px";

Attribute

setAttribute

可以使用 setAttribute 來設定元素上面的屬性。

<a id="myLink" href="#">點我</a>

document.getElementById("myLink").setAttribute('href', 'http://www.google.com');

getAttribute

可以使用 getAttribute 來取得元素上面的屬性值。

var url = document.getElementById("myLink").getAttribute('href');

今日的分享就到這，明日會整理常用的事件，我們明天見